// 声明盒子
<template>
  <!-- <div>1233</div> -->
  <div id="viewer " ref="viewer" style="width: 800px;height: 600px;background-color: palegreen;"></div>
  <!-- <img src="./../assets/image/local-1.jpg" alt=""> -->
  <!-- <img src="./assets/images/local-1.jpg" alt=""> -->

</template>

// js逻辑
<script setup>


  import { ref, onMounted } from "vue"
  let viewer = ref(null)
  console.log("box==>", viewer)
  // import imgSrc from ""
  // import { Viewer } from 'photo-sphere-viewer' // 引入插件
  // import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' //引入CSS样式
  import { Viewer } from 'photo-sphere-viewer'
  import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

  // This plugin is available in the @photo-sphere-viewer/map-plugin (opens new window)package.
  // import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin"
  // import "@photo-sphere-viewer/markers-plugin/index.css"

  // import { EquirectangularTilesAdapter } from '@photo-sphere-viewer/equirectangular-tiles-adapter';
  // // 点位插件
  import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
  import "photo-sphere-viewer/dist/plugins/markers.css";
  //引入切片适配器 the @photo-sphere-viewer/equirectangular-tiles-adapter
  // import { EquirectangularTilesAdapter } from "photo-sphere-viewer/equirectangular-tiles-adapter"
  // import { EquirectangularTilesAdapter } from "photo-sphere-viewer/dist/adapters/equirectangular-tiles"
  import * as three from 'three';
  let panoramaViewer = null
  // let viewer = Viewer | null
  import srcimg from "./assets/images/local-1.jpg"
  // console.log("srcimg", srcimg)
  // 全景图初始化
  const initViewer = async function () {
    panoramaViewer = new Viewer({
      container: viewer.value, // 容器
      // adapter: EquirectangularTilesAdapter,
      panorama: srcimg,

      // panorama: 'https://img.zcool.cn/community/01429859a3e6c2a801211d25e8611e.jpg@2o.jpg',
      // panorama: {
      //   width: 6656,
      //   cols: 16,
      //   rows: 8,
      //   baseUrl: 'https://img.zcool.cn/community/01429859a3e6c2a801211d25e8611e.jpg@2o.jpg',
      //   tileUrl: (col, row) => {
      //     const num = row * 16 + col + 1;
      //     return `https://img.zcool.cn/community/01429859a3e6c2a801211d25e8611e.jpg@2o_${col}_${row}.jpg`;
      //   },
      // },
      // panorama: "https://img.zcool.cn/community/01429859a3e6c2a801211d25e8611e.jpg@2o.jpg",
      navbar: false,

      plugins: [
        [
          MarkersPlugin,
          {
            markers: [


              {
                id: "go04",
                tooltip: "点击查看楼盘内房子",
                circle: 20,
                position: { yaw: 1.4730585674636925, pitch: -0.5050378386910159 },
                style: {
                  fill: "rgba(255,255,255)",
                },
                longitude: -0.22188456912854737,
                latitude: 6.1139406999543375,
              },
              {
                id: "go01",
                tooltip: "点击查看楼盘内房子2",
                circle: 20,
                position: { yaw: 4.953211328894498, pitch: -1.061435632768692 },
                style: {
                  fill: "red",
                },
                longitude: 3.09,
                latitude: -0.25,
              },
            ],
          },
        ],
      ],


      size: {
        width: '100vw',
        height: '100vh',
      },
    })
  }
  onMounted(() => {
    initViewer()
  })

</script>
<style>
  #app {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw;
    height: 100%;
    max-width: 100%;
  }

  :deep(body) {
    width: 100vw !important;
  }
</style>
// script